<template>
	<el-dialog title="新增友情链接" :visible.sync="dialogVisible" width="40%">
		<el-form ref="form" :rules="rules" :model="form" label-width="100px" >
			<el-form-item label="链接名称" prop="name">
				<el-input placeholder="" v-model="form.name"></el-input>
			</el-form-item>
      <el-form-item label="链接地址" prop="url">
        <el-input placeholder="" v-model="form.url"></el-input>
      </el-form-item>
      <el-form-item label="链接缩略图">
        <!--
        action="http://127.0.0.1:8088/admin/newsCtl/newsupload"
                   因为此处请求用的不是axios框架发送的,前面的ip+端口部分不能全局的配置
                   :headers="{adminToken:adminToken}"  自定义请求头
              自定义请求头-->
          <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8089/admin/LinkCtl/uploadLinkimg"
              :headers="{adminToken:adminToken}"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </el-form-item>

      <el-form-item label="是否在前台发布" prop="state" label-width="130px">
        <el-col :span="16">
          <el-radio v-model="form.state" :label="1">发布</el-radio>
          <el-radio v-model="form.state" :label="0">隐藏</el-radio></el-col>
      </el-form-item>

		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save('form')">保存</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: "Add",
		data() {
			return {
				dialogVisible: false,
        imageUrl:'',
        adminToken:'',
				form: {
          id:'',
          name: '',
          url:'',
          picture:'',
          state:'',
				},
				flag:true,
        rules: {
          name: [{
            required: true,
            message: '请输入新增的链接名称！',
            trigger: 'blur'
          },
            {
              min: 1,
              max: 15,
              message: '长度在 1 到 15 个字符',
              trigger: 'blur'
            }
          ],
          url: [{
            required: true,
            message: '请输入的链接地址！',
            trigger: 'blur'
          },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],

          state: [{
            required: true,
            message: '请选择链接是否在前台显示！',
            trigger: 'blur'
          }
          ]
				},
			}
		},
		methods: {
			
			save(reffrom) {
        //数据向后端发送进行验证
        //$refs是一个引用

        this.$refs[reffrom].validate((valid) => {
          if (valid) {
            //如果发送成功，跳转到其他组件
            //【跳转语句】
            this.$http.post("admin/LinkCtl/saveLink", this.form).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: '恭喜你，修改成功✔',
                  type: 'success'
                });
                this.$router.go();
              }
            })
          }
        });

			},
      handleAvatarSuccess(res, file) {
			  //前端临时压缩
        this.imageUrl = URL.createObjectURL(file.raw);
        if (res.code==401){
          alert("token验证失败")
        }
        if(res.code==500){
          alert("系统忙");
        }
        if(res.code==200){
          this.form.picture = res.data;
        }

      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      }
		},
		mounted() {
			this.$http.get("admin/NewsCtl/findNewsTypeList").then((res) => {
				if (res.data.code == 200) {
					this.newsTypeList = res.data.data;
				}
			})
      this.adminToken = window.sessionStorage.getItem('adminToken');

    }
	}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>